<template>
  <div class="container">
  <el-row>
  <!-- <el-button style="float: left;" size="mini" type="primary" @click="add()">新增</el-button> -->
  <!-- <span>{{$route.query.userName}}</span> -->
  </el-row>
  <el-table
    :data="menuPkgList"
    style="width: 100%">
    <el-table-column
      label="套餐ID号">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope" >
        <span style="margin-left: 10px" >{{ scope.row.pacId }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="套餐名">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.pacName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品名">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="套餐成本">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.pacCost }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="套餐价格">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.pacPrice }}</span>
      </template>
    </el-table-column>




    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="update(scope.row)"><i class="el-icon-edit"></i>编辑</el-button> -->
        <el-button
          size="mini"
          type="danger"
          @click="delInfo(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
      </template>
    </el-table-column>
  </el-table>



  <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">
      <el-form ref="form" label-width="80px">
                  <br>
                  <el-form-item label="套餐ID">
                    <el-col :span="21">
                      <input type="hidden" v-model="menuForm.pacId" />
                      <el-input  placeholder="请输入套餐ID" v-model="menuForm.pacId" ></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="菜品ID">
                      <el-col :span="21">
                        <el-input placeholder="请输入菜品ID" v-model="menuForm.menuId"></el-input>
                      </el-col>
                  </el-form-item>

                  <el-form-item label="菜品名">
                    <el-col :span="21">
                      <el-input placeholder="请输入菜品名" v-model="menuForm.menuName"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="套餐成本">
                    <el-col :span="21">
                      <el-input placeholder="请输入套餐成本" v-model="menuForm.pacCost"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="套餐价格">
                    <el-col :span="21">
                      <el-input placeholder="请输入套餐价格" v-model="menuForm.pacPrice"></el-input>
                    </el-col>
                </el-form-item>

                </el-form>
  <span slot="footer" class="dialog-footer">
             <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="saveInfo()">保存</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
  export default {
    name: "menuPkgList",  //menuList只是一个属性描述，
    data() {
      return {
        menuPkgList: [],
        title: "新增", // 模态框标题
        menuForm: { // 表单的请求对象
          pacId: null,
          pacName:null,
          pacCost:null,
          pacPrice:null,
          menuId:null,
          menuName:null
        },
        isShow:false,
        title:""
      }
    },
    methods: {

      loaddata() { // 加载函数
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/menu/getMenuPkg",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows
          },
          dataType: "json",
          success: function(data) {
            console.log(data.list);
            mythis.menuPkgList = data.list;
            mythis.total = data.list.total;
            mythis.totalPage = data.list.totalPage;
          }
        })
      },
      add(){
        this.isShow=true;
        //更改模态框的标题
        this.title="新增";
        //清除表单元素
        this.menuForm.pacId=null;
        this.menuForm.pacName="";
        this.menuForm.pacCost="";
        this.menuForm.pacPrice="";
        this.menuForm.menuName="";
      },
      update(x){//打开修改模态框
        this.isShow=true;
        //更改模态框的标题
        this.title="修改";
        //把选中的值赋值给模态框的表单元素
        this.menuForm.pacId=x.pacId;
        this.menuForm.pacName=x.pacName;
        this.menuForm.pacCost=x.pacCost;
        this.menuForm.pacPrice=x.pacPrice;
        this.menuForm.menuName=x.menuName;
      },
      saveInfo(){//保存
      var url=""
        if(this.title=="修改"){

          url="http://localhost:8080/menu/updateMenu"
        }else{
           url="http://localhost:8080/menu/addMenuToPkg"
        }
        var mythis=this;
        $.ajax({
          url:url,
          type:"get",
          data:mythis.menuForm,
          dataType:"json",
          success:function(data){
            console.log(data)
            mythis.$alert(data.info);
            if(data.info=="保存成功"||data.info=="修改成功"||data.info=="新增成功"){
              //关闭模态框
             mythis.isShow=false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x){
        var is = confirm("你确定删除数据吗？");
        if(is){
          var mythis=this;
          $.ajax({
            url:"http://localhost:8080/menu/delMenuById",
            type:"get",
            data:{"id":x.menuId},
            dataType:"json",
            success:function(data){
              console.log(data)
              mythis.$alert(data.info);
              if(data.info=="删除成功"){
                //关闭模态框
                mythis.isShow=false;
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },
      indexPage(){//首页
        this.curPage=1;
         this.loaddata();
      },
      endPage(){//尾页
         this.curPage=this.totalPage;
         this.loaddata();
      },
      prePage(){//上一页
        this.curPage--;
        if(this.curPage<1){
          this.curPage=1;
        }
        this.loaddata();
      },
      nextPage(){//下一页
        this.curPage++;
        if( this.curPage>this.totalPage){
           this.curPage=this.totalPage;
        }
        this.loaddata();
      },
      selectPage(v){//用户选择的页数
      this.rows=v;
        this.loaddata();
      },
      handleCurrentChange(v){//当前页触发事件
        this.curPage=v;
        this.loaddata();

      }
    },
    mounted(){
      this.loaddata();
    }
  }
</script>

<style>
</style>
